<template>
    <textarea size="mini" :id="`tinymce-${id}`">
    </textarea>
</template>

<script>

import tinymce from 'tinymce/tinymce';
import 'tinymce/plugins/paste';
import 'tinymce/plugins/link';
import 'tinymce/plugins/image';
import 'tinymce/plugins/fullscreen';
import 'tinymce/plugins/code';
import 'tinymce/plugins/table';
import 'tinymce/plugins/textcolor';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/searchreplace';
import 'tinymce/plugins/preview';

export default {
  name: 'v-tinymce-editor',
  components: {
  },
  props: {
    value: {
      type: String
    },
    id: {
      type: String
    },
  },
  
  mounted() {
    tinymce.init({
      height: 300,
      selector: '#tinymce-' + this.id,
      mode: 'none',
      setup: (editor)=> {
        // 初次化编辑器
        editor.on('init', ()=>{
          // 设置默认值
          if ( ! this.value) {
            this.value = '';
          }
          editor.setContent(this.value);
          // 注册事件
          editor.on('input change undo redo', ()=>{
            // 获得编辑结果
            this.$emit('input', editor.getContent());
            this.$store.state.edit.dataChanged = true;
          });
        });
      },
      plugins: [
        'paste',
        'link',
        'image',
        'fullscreen',
        'code',
        'table',
        'lists',
        'searchreplace',
        'preview',
      ],
      toolbar1: "undo redo | styleselect formatselect fontselect fontsizeselect | forecolor backcolor | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | link unlink anchor image media | searchreplace code preview fullscreen ",
      branding: false,
    });

    tinymce.execCommand('mceAddEditor', true, 'tinymce-' + this.id);
  },
  beforeDestroy: function(){
    tinymce.execCommand('mceRemoveEditor', true, 'tinymce-' + this.id);
  }
}
</script>
</style>